<template>
  <div>
    <el-row v-if="model=='block'" :gutter="5">
      <el-col
        v-for="(item,index) in paramList"
        :key="index"
        :span="item.spanMultiple * 8"
      >
        <div
          v-if="editModel || showHidden === '1' || !item.hidden"
          :class="[editModel ? 'hidden-border':'item-border','item', searchName != ''&&item.name.indexOf(searchName) >= 0 ? 'check' :'']"
          @click.stop="paramClick(item)"
        >
          <div class="flex">
            <div @click.stop>
              <device-param-icon :param="item" />
            </div>
            <div v-if="item.editParam == true" @click.stop="">
              <el-input v-model="item.remark">
                <template
                  slot="prepend"
                >{{ item.name }}
                </template>
                <el-button
                  slot="append"
                  icon="el-icon-check"
                  @click.stop="updateParamName(item)"
                />
                <el-button
                  slot="append"
                  icon="el-icon-close"
                  @click.stop="cancelUpdateParamName(item)"
                />
              </el-input>
            </div>
            <div v-else style="flex-grow: 1;margin-left: 5px">
              <div
                class="text-xs text-gray-500 flex justify-between"
                style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
              >
                <div @click.stop="editParam(item)">
                  <el-popover
                    v-if="item.remark && item.remark!==''"
                    placement="top"
                    width="200"
                    trigger="hover"
                    :content="item.name"
                  >
                    <span slot="reference">{{ item.remark }}</span>
                  </el-popover>
                  <span v-else>{{ item.name }}</span>
                </div>
                <div class="text-gray-400">
                  <div v-if="editModel">
                    <span v-if="item.hidden" class="el-icon-view" @click.stop="showParam(item)" />
                    <span v-else class="el-icon-close" @click.stop="hiddenParam(item)" />
                  </div>
                </div>
              </div>
              <div class="text-gray-400 text-xs" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                {{ formatDate(item.updateDate) }}
              </div>
            </div>
          </div>
          <div style="padding-top: 8px">
            <div class="flex justify-center" style="flex-wrap: wrap ">
              <div
                v-for="(split,index2) in item.value.split(',')"
                :key="index2"
                class="mx-2"
              >
                <div
                  style="color: #03c2c2;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 25px;line-height: 55px;height: 55px;font-weight: lighter;text-align: center"
                >
                  <span>{{ split }}</span>
                  <span>{{ item.unit }}</span>
                </div>
              </div>
            </div>
            <div style="height: 18px" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-else-if="model=='list'">
      <div
        v-for="(item,index) in paramList"
        :key="index"
        @click="paramClick(item)"
      >
        <div
          v-if="editModel || !item.hidden"
          style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 5px;padding: 8px"
          :class="[editModel ? 'hidden-border':'item-border','item', searchName != '' && item.name.indexOf(searchName) >= 0 ? 'check' :'']"
        >
          <div style="display: flex;align-items: center;">
            <div style="margin-right: 5px;margin-top: 3px" @click.stop>
              <device-param-icon :param="item" />
            </div>
            <div v-if="item.editParam == true" @click.stop="">
              <el-input v-model="item.remark">
                <template
                  slot="prepend"
                >{{ item.name }}
                </template>
                <el-button
                  slot="append"
                  icon="el-icon-check"
                  @click.stop="updateParamName(item)"
                />
                <el-button
                  slot="append"
                  icon="el-icon-close"
                  @click.stop="cancelUpdateParamName(item)"
                />
              </el-input>
            </div>
            <div v-else>
              <div class="text-sm" @click.stop="editParam(item)">
                <el-popover
                  v-if="item.remark && item.remark!==''"
                  placement="top"
                  width="200"
                  trigger="hover"
                  :content="item.name"
                >
                  <span slot="reference">{{ item.remark }}</span>
                </el-popover>
                <span v-else>{{ item.name }}</span>
              </div>
              <div class="text-gray-400">{{ formatDate(item.updateDate) }}</div>
            </div>
          </div>
          <div>
            <div v-if="editModel">
              <el-button
                v-if="item.hidden"
                icon="el-icon-view"
                @click.stop="showParam(item)"
              />
              <el-button
                v-else
                icon="el-icon-close"
                @click.stop="hiddenParam(item)"
              />
            </div>
            <div
              v-else
              class="primary-color text-lg font-bold"
            >
              <span>{{ item.value }}</span>
              <span class="text-sm">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="showParamInfo"
      append-to-body
      destroy-on-close
      width="1300px"
      top="15px"
    >
      <device-param-info v-if="showParamInfo" :param="param" />
    </el-dialog>

  </div>
</template>

<script>
import {
  successNotice,
  formatDate
} from '@/util/common'
import { updateDeviceParam } from '@/api/iot/iotDeviceParamApi'
import DeviceParamIcon from '@/components/DeviceParamIcon'
import DeviceParamInfo from '@/components/DeviceParamInfo'

export default {
  name: 'DeviceParam',
  components: {
    DeviceParamIcon,
    DeviceParamInfo
  },
  props: {
    model: {
      type: String,
      default: 'list'
    },
    paramList: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchName: {
      type: String,
      default: null
    },
    editModel: {
      type: Boolean,
      default: false
    },
    showHidden: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      showParamInfo: false,
      param: {}
    }
  },
  watch: {
    paramList: {
      deep: true,
      handler(val) {
        this.formatParam()
      }
    }
  },
  created() {
    this.formatParam()
  },
  methods: {
    formatParam() {
      for (const param of this.paramList) {
        if (!param.editParam) {
          param.editParam = false
        }
        if (param.value.length > 6) {
          param.spanMultiple = 2
        } else {
          param.spanMultiple = 1
        }
        const splitList = param.value.split(',')
        if (splitList.length !== 1) {
          if (splitList.length < 5) {
            param.spanMultiple = 2
          } else {
            param.spanMultiple = 3
          }
        }
      }
    },
    paramClick(item) {
      this.param = item
      this.showParamInfo = true
    },
    editParam(item) {
      for (const i in this.paramList) {
        if (this.paramList[i].paramId === item.paramId) {
          item.editParam = true
          this.paramList.splice(i, 1, item)
          break
        }
      }
    },
    cancelUpdateParamName(item) {
      for (const i in this.paramList) {
        if (this.paramList[i].paramId === item.paramId) {
          item.editParam = false
          this.paramList.splice(i, 1, item)
          break
        }
      }
    },
    updateParamName(item) {
      updateDeviceParam({
        paramId: item.paramId,
        remark: item.remark
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        for (const i in this.paramList) {
          if (this.paramList[i].paramId === item.paramId) {
            item.editParam = false
            this.paramList.splice(i, 1, item)
            break
          }
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    hiddenParam(item) {
      const hidden = true
      updateDeviceParam({
        paramId: item.paramId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    showParam(item) {
      const hidden = false
      updateDeviceParam({
        paramId: item.paramId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.item {
  margin-top: 5px;
  padding: 10px;
  border-color: rgba(0, 0, 0, .1);
  border-width: 1px;
  border-radius: 8px;
}

.item-border {
  border-style: solid;
}

.hidden-border {
  border-style: dashed;
}

.check {
  background-color: #ebeef5;
}

.item:hover {
  background-color: #efefef;
}
</style>
